<template>
  <div>
    <el-row style="height: 20px">
      <el-col :span="20">
        <a href="/shopping/order">查看订单</a> <a href="/shopping/cart">我的购物车</a>
      </el-col>
      <el-col :span="4">
        <div v-html="loginInfo"></div>
      </el-col>
    </el-row>

    <el-row>
      商品名：<input type="text" v-model="paramObj.name">
      生产起始日期：<input type="text" v-model="paramObj.startDate">
      生产结束日期：<input type="text" v-model="paramObj.endDate">
      <input type="button" value="搜索" @click="cutByItem(1)">
    </el-row>

    <el-row>
      <el-col :span="6" v-for="p in iPage.records" :key="p.id" style="text-align: center">
        <img :src="'/project/productImg/'+p.img" width="200" height="200"><br>
        {{ p.name }} <br>
        单价：￥{{ p.price }} <br>
        已售出{{ p.saleNum }}件 <br>

        <el-button type="info" @click="$router.push({name:'/shopping/product',query:{id:p.id}})">查看</el-button>
        <el-button type="primary" @click="buy(p.id)">购买</el-button>
      </el-col>
    </el-row>

    <el-row>
      <!--分页-->
      <el-pagination
          v-model:currentPage="iPage.current"
          v-model:page-size="iPage.size"
          background
          layout="prev, pager, next, jumper"
          :total="iPage.total"
          @current-change="pageClick"
      />
    </el-row>


  </div>
</template>

<script>
import axios from "axios";


export default {
  data() {
    return {
      loginInfo: "",
      paramObj: {},
      iPage: {}
    }
  }, methods: {
    getLoginInfo() {
      axios.get("/project/user/getLoginInfo").then(resp => {
        if (resp.data == "") {
          this.loginInfo = "你好请先<a href='/login'>登陆</a>"
        } else {

          if (resp.data.grade == "管理员") {
            this.$router.push("/manager");
          } else if (resp.data.grade == "送货员") {
            this.$router.push("/expressman");
          } else {
            this.loginInfo = "欢迎光临" + resp.data.username;
          }

        }
      })
    },

    cutByItem(pageNO) {
      this.paramObj.pageNO = pageNO;
      axios.get("/project/product/cutByItem", {params: this.paramObj}).then(resp => {
        this.iPage = resp.data;
      })
    }, pageClick(pageNO) {
      this.cutByItem(pageNO)
    }, buy(productId) {
      axios.get("/project/cart/buy", {params: {productId}}).then(resp => {
        if (resp.data == "ok") {
          this.$router.push("/shopping/cart");
        }
      })
    }

  }, created() {
    this.getLoginInfo();
    this.cutByItem(1);
  }
}
</script>

<style scoped>
a {
  margin-left: 20px;
}

.el-row {
  margin: 20px 0;
}
</style>